<template>
  <view>
    <view class="user">
      <!-- 小程序基本都是一键登录，授权获取当前微信用户信息 -->
       <block v-if="userInfo.nickName">
        <image
          class="user_avatar_bg"
          :src="userInfo.avatarUrl"
          mode="widthFix"
        />
         <!-- uView的头像组件 -->
        <u-avatar
          size="172"
          :src="userInfo.avatarUrl"
          show-sex
          :sex-icon=" userInfo.gender === 1 ? 'man' : 'woman' "
          show-level
        ></u-avatar>
        <!-- <image
          class="user_avatar"
          :src="userInfo.avatarUrl"
        /> -->
        <text class="user_nickName">{{ userInfo.nickName }}</text>
      </block>
      <button
      v-else
        class="user_btn"
        open-type="getUserInfo"
        @getuserinfo="getUserInfoHandle"
      >去登录</button>
    </view>
     <!-- 2.0 宫格 -->
    <view class="grid">
      <u-grid
        :col="4"
        :border="false"
      >
        <u-grid-item>
          <u-icon
            name="file-text"
            :size="46"
          ></u-icon>
          <view class="grid-text">待付款</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon
            name="car"
            :size="46"
          ></u-icon>
          <view class="grid-text">待收货</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon
            name="rmb-circle"
            :size="46"
          ></u-icon>
          <view class="grid-text">退货/退款</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon
            name="order"
            :size="46"
          ></u-icon>
          <view class="grid-text">全部订单</view>
        </u-grid-item>
      </u-grid>
    </view>
     <!-- 3.0 单元格 -->
    <u-cell-group>
      <u-cell-item
        icon="setting-fill"
        title="个人设置"
        :arrow="false"
      ></u-cell-item>
      <u-cell-item
        icon="server-man"
        title="电话客服"
        value="400-618-40000"
         @click="makePhoneCallHandle"
      ></u-cell-item>
      <u-cell-item
        icon="integral-fill"
        title="当前版本"
        value="v4.1.1"
      ></u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onShow() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
   methods:{
     async getUserInfoHandle(e) {
      console.log(e.detail);
      const { userInfo, encryptedData, rawData, iv, signature } = e.detail;

      // 🎉 注意：通过解构赋值提取出 code (验证码)，
      // 解构前的数据：[ null, { errMsg: "login:ok", code: "083vvi1w3HatTV2iNy0w3nPX0O0vvi1x"} } ]
      const [, { code }] = await uni.login();
      console.log(code);

      return;
       this.userInfo = userInfo;
       uni.setStorageSync("userInfo",userInfo)
     },
      makePhoneCallHandle() {
      // console.log(1111);
      uni.makePhoneCall({ phoneNumber: "10086" });
      // wx.makePhoneCall({
      //   phoneNumber: "110", //仅为示例，并非真实的电话号码
      // });
    },
   }
}
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.user {
  height: 330rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
   position: relative;
  overflow: hidden;
  .user_btn {
    background-color: #07c160;
    color: #fff;
    width: 400rpx;
    &::after {
      border: none;
    }
  }
  .user_avatar {
    width: 172rpx;
    height: 172rpx;
    border-radius: 50%;
    overflow: hidden;
  }
  .user_nickName {
    font-size: 32rpx;
    margin-top: 20rpx;
      color: #fff;
  }
  .user_avatar_bg {
    width: 120%;
    height: 120%;
    position: absolute;

    z-index: -1;
    filter: blur(35rpx);
  }
}
.grid {
  margin: 20rpx;
  border-radius: 5rpx;
}
</style>